<template>
  <div class="pollution-source-info">
    <!-- <h2>基本信息</h2> -->
    <div class="info-item">
      <label>污染源名称：</label>
      <span>{{ sourceInfo.pollutionSourceName }}</span>
    </div>
    <div class="info-item">
      <label>污染源编码：</label>
      <span>{{ sourceInfo.pollutionSourceCode }}</span>
      <label>统一社会信用代码：</label>
      <span>{{ sourceInfo.unifiedSocialCreditCode }}</span>
    </div>
    <div class="info-item">
      <label>监管分级：</label>
      <span :class="getLabelClass(sourceInfo.supervisionLevel)">{{ sourceInfo.supervisionLevel }}</span>
      <label>监管部门：</label>
      <span>{{ sourceInfo.supervisionDepartment }}</span>
    </div>
    <div class="info-item">
      <label>行政区：</label>
      <span>{{ sourceInfo.administrativeRegion }}</span>
      <label>街道(镇)：</label>
      <span>{{ sourceInfo.street }}</span>
    </div>
    <div class="info-item">
      <label>排污许可管理级别：</label>
      <span :class="getLabelClass(sourceInfo.sewagePermitLevel)">{{ sourceInfo.sewagePermitLevel }}</span>
      <label>联系人：</label>
      <span>{{ sourceInfo.contactPerson }}</span>
    </div>
    <div class="info-item">
      <label>联系电话：</label>
      <span>{{ sourceInfo.contactPhone }}</span>
      <label>排污许可编码：</label>
      <span>{{ sourceInfo.sewagePermitCode }}</span>
    </div>
    <div class="info-item">
      <label>行业代码及名称：</label>
      <span>{{ sourceInfo.industryCodeName }}</span>
      <label>园区：</label>
      <span>{{ sourceInfo.park }}</span>
    </div>
    <div class="info-item">
      <label>WGS84经度：</label>
      <span>{{ sourceInfo.wgs84Longitude }}</span>
      <label>WGS84纬度：</label>
      <span>{{ sourceInfo.wgs84Latitude }}</span>
    </div>
    <div class="info-item">
      <label>上海x：</label>
      <span>{{ sourceInfo.shanghaiX }}</span>
      <label>上海y：</label>
      <span>{{ sourceInfo.shanghaiY }}</span>
    </div>
    <div class="info-item">
      <label>污染源状态：</label>
      <span :class="getLabelClass(sourceInfo.sourceStatus)">{{ sourceInfo.sourceStatus }}</span>
      <label>执法分级：</label>
      <span :class="getLabelClass(sourceInfo.lawEnforcementLevel)">{{ sourceInfo.lawEnforcementLevel }}</span>
    </div>
    <div class="info-item">
      <label>生产经营地址：</label>
      <span>{{ sourceInfo.businessAddress }}</span>
    </div>
    <div class="info-item">
      <label>相关附件：</label>
      <ul class="attachment-list" style="display: flex;">
        <li v-for="(item, index) in sourceInfo.relatedAttachments" :key="index" style="margin-left: 10px;">
          <a href="#" target="_blank">{{ item }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义数据接口
interface PollutionSourceInfo {
  pollutionSourceName: string;
  pollutionSourceCode: string;
  unifiedSocialCreditCode: string;
  supervisionLevel: string;
  supervisionDepartment: string;
  administrativeRegion: string;
  street: string;
  sewagePermitLevel: string;
  contactPerson: string;
  contactPhone: string;
  sewagePermitCode: string;
  industryCodeName: string;
  park: string;
  wgs84Longitude: string;
  wgs84Latitude: string;
  shanghaiX: string;
  shanghaiY: string;
  sourceStatus: string;
  lawEnforcementLevel: string;
  businessAddress: string;
  relatedAttachments: string[];
}

// 模拟数据，实际可从接口获取
const sourceInfo = ref<PollutionSourceInfo>({
  pollutionSourceName: '上海申能崇明发电有限公司',
  pollutionSourceCode: '086208960001',
  unifiedSocialCreditCode: '91310230086208960J',
  supervisionLevel: '重点监管',
  supervisionDepartment: '崇明',
  administrativeRegion: '崇明',
  street: '城桥镇',
  sewagePermitLevel: '重点管理',
  contactPerson: '任伟超',
  contactPhone: '18121198290',
  sewagePermitCode: '91310230086208960J001P',
  industryCodeName: '4411火力发电',
  park: '-',
  wgs84Longitude: '121.47417',
  wgs84Latitude: '31.58806',
  shanghaiX: '39132.1',
  shanghaiY: '860.9',
  sourceStatus: '生产',
  lawEnforcementLevel: '重点',
  businessAddress: '上海市崇明区城桥镇推虾港路118号',
  relatedAttachments: [
    '排污许可证正本',
    '排污许可证副本',
    '排污许可编码对照表',
    '二维码图片'
  ]
});

// 根据状态返回不同样式类名，用于突出显示重点等状态
const getLabelClass = (status: string) => {
  return status.includes('重点') ? 'label重点' : '';
};
</script>

<style scoped>
.pollution-source-info {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
}

h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.info-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.info-item label {
  width: 160px;
  text-align: right;
  margin-right: 10px;
  color: #666;
}

.info-item span {
  flex: 1;
  word-break: break-all;
}

.label重点 {
  color: #ff5722;
  font-weight: bold;
}

.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attachment-list li {
  margin-bottom: 5px;
}
</style>